.scroll-view-prop {
  position: absolute;
  top: 75px;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(100vh - 90px);

  .PageBackpackPropBox {
    background-color: #ffffff;
    overflow: hidden;
    // padding: 25px 0;
    // margin: 30px;

    .toolsBox {
      flex-direction: row;
      flex-wrap: wrap;
      // margin: 32rpx;
    }

    // 未使用
    .notUsedBox {
      margin-left: 30rpx;
      margin-top: 40rpx;
      align-items: center;
      justify-content: center;
      width: 330rpx;
      height: 300rpx;
      padding: 20rpx;
      background: #FFFDFA;
      border-radius: 20rpx;
      border: 4rpx solid #FFAA0D;

      .title {
        height: 50rpx;
        font-size: 30rpx;
        font-weight: 600;
        color: #FBB016;
        line-height: 50rpx;
      }

      .effect {
        height: 50rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #FBB016;
        line-height: 50rpx;
      }

      .prop {
        margin-top: 20rpx;
        width: 102rpx;
        height: 100px;
      }

      .use {
        margin-top: 22rpx;
        width: 112rpx;
        height: 44rpx;
        line-height: 44rpx;
        background: linear-gradient(180deg, #FFC51C 0%, #FF9903 100%);
        border-radius: 26rpx;
        color: #ffffff;
        font-size: 24rpx;
        text-align: center;
      }

      .period {
        margin-top: 10rpx;
        height: 30rpx;
        line-height: 30rpx;
        font-size: 18rpx;
        font-weight: 400;
        color: #FBB015;
      }

    }

    // 已使用
    .userdBox {
      display: flex;
      flex-direction: column;
      margin-left: 30rpx;
      margin-top: 40rpx;
      width: 330rpx;
      height: 300rpx;

      .usedItem {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 330rpx;
        height: 300rpx;
        padding: 20rpx;
        background: #FFFDFA;
        border-radius: 20rpx;
        border: 4rpx solid #FFAA0D;

        .title {
          height: 50rpx;
          font-size: 30rpx;
          font-weight: 600;
          color: #FBB016;
          line-height: 50rpx;
        }

        .effect {
          height: 50rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #FBB016;
          line-height: 50rpx;
        }

        .prop {
          margin-top: 20rpx;
          width: 102rpx;
          height: 100px;
        }

        .period {
          margin-top: 10rpx;
          height: 30rpx;
          font-size: 18rpx;
          font-weight: 400;
          color: #FBB015;
          line-height: 30rpx;
        }
      }

      .cover {
        margin-top: -300rpx;
        margin-left: 0;
        width: 330rpx;
        height: 300rpx;
        background: #000000;
        border-radius: 20rpx;
        opacity: 0.5;
        display: flex;
        .img{
          width: 136rpx;
          height: 136rpx;
          margin: auto;
        }
      }
    }

    // 已失效
    .expiredBox {
      display: flex;
      flex-direction: column;
      margin-left: 30rpx;
      margin-top: 40rpx;
      width: 330rpx;
      height: 300rpx;

      .expiredItem {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 330rpx;
        height: 300rpx;
        padding: 20rpx;
        background: #FFFDFA;
        border-radius: 20rpx;
        border: 4rpx solid #FFAA0D;

        .title {
          height: 50rpx;
          font-size: 30rpx;
          font-weight: 600;
          color: #FBB016;
          line-height: 50rpx;
        }

        .effect {
          height: 50rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #FBB016;
          line-height: 50rpx;
        }

        .prop {
          margin-top: 20rpx;
          width: 102rpx;
          height: 100px;
        }

        .period {
          margin-top: 10rpx;
          height: 30rpx;
          font-size: 18rpx;
          font-weight: 400;
          color: #FBB015;
          line-height: 30rpx;
        }
      }

      .cover {
        margin-top: -300rpx;
        margin-left: 0;
        width: 330rpx;
        height: 300rpx;
        background: #000000;
        border-radius: 20rpx;
        opacity: 0.5;
        .img{
          width: 136rpx;
          height: 136rpx;
          margin: auto;
        }
      }
    }

  }
}